<script setup>
import { reactive, ref } from 'vue'
import DialogForm from '@/components/DialogForm/index.vue'
import ProDialog from '@/components/Dialog/index.vue'

const visible = ref(false)

const confirm = () => {
  visible.value = false
}
const cancel = () => {
  visible.value = false
}

const formData = reactive({})

const formColumn = ref([
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Input",
      label: "姓名",
      prop: "name",
      maxlength: 100,
      placeholder: "请输入姓名",
      "show-word-limit": true,
    },
  },
  {
    layout: {
      span: 12,
    },
    comOpts: {
      xType: "Input",
      label: "地址",
      prop: "address",
      maxlength: 100,
      placeholder: "请输入地址",
    },
  },
])
const formRules = {
  name: [
    { required: true, message: "请输入活动名称", trigger: "blur" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入", trigger: "blur" },
  ],
};

const beforeClose = (done) => {
  console.log('beforeClose', done);
  
  visible.value = false
}

const visible2 = ref(false)
const visible2Cancel = () => {
  visible2.value = false
}
const visible2Confirm = () => {
  visible2.value = false
}
</script>

<template>
  <div class="">
    
    <el-button type="primary" @click="visible2 = true">
      打开proDialog
    </el-button>
    <el-button type="primary" @click="visible = true">
      打开dialogForm
    </el-button>

    <DialogForm 
      :visible.sync="visible"
      width="60vw"
      title="新增"
      :form-column="formColumn"
      :form-data="formData"
      :form-rules="formRules"
      :before-close="beforeClose"
      @confirm="confirm"
      @cancel="cancel"
      />

    <ProDialog
      :visible.sync="visible2"
      width="60vw"
      title="prodialog"
      :before-close="beforeClose"
      @cancel="visible2Cancel"
      @confirm="visible2Confirm"
    />
  </div>
</template>

<style lang="scss" scoped></style>
